import React from 'react'
import { useState,useEffect } from 'react';
import { Dialog } from 'react-vant';
import { bindActionCreators} from "redux"
import {useSelector,useDispatch,connect} from "react-redux" // hooks只有函数组件可以用啊，connect类组件和函数组件都可以用
import * as action from "../action"
function Dirlog1(props) {
 let [show, setShow] = useState(false)
  useEffect(()=>{ // useEffect第二个参数数组里有值得时候相当于shouldcomponentDidupdate
     // 跟vue得watch也差不多
     console.log(props);
  },[props.show])
  let store = useSelector((state)=>{ // 相当于mapstateToprops 
      return {
          ...state.shopReducer
      }
  })
  let dispatch = useDispatch()
  return (
      // 子组件要想修改父组件得数据，只能通过一种方法，就是子组件调用父组件得方法
      // 1 .父组件给子组件传递一个方法

    <div>
    
         <Dialog
                visible={props.show}
                title="您确定要删除吗？"
                showCancelButton
                onCancel={() => {props.closefn1(false)}}
                onConfirm={() => {
                //    dispatch(action.delfn1(props.delindex)) // 相当于类组件三步走得第一步
                    props.delfn1(props.delindex)
                    props.closefn1(false)
                }}
                >
            </Dialog>
    </div>
  )
}

const mapStateToProps = (state) => {
    return {
        ...state.shopReducer
    }
}

const mapDispatchToProps = (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapStateToProps,mapDispatchToProps)(Dirlog1)